<template>
  <div id="app">
    <!-- <transition :name="$store.state.states"> -->
      <router-view/>
    <!-- </transition> -->
    <tab></tab>
  </div>
</template>

<script>
import Tab from "components/tab/tab";
export default {
  name: "App",
  components: {
    Tab
  },
  mounted() {
    // var _this = this;
    // window.addEventListener(
    //   "popstate",
    //   (e) => {
    //     _this.$store.commit("setTransition", "turn-off");
    //   },
    //   false
    // );
  }
};
</script>

<style lang="stylus" scoped>
#app {
  width: 100%;
  height: 100%;
}

.turn-on-enter {
  transform: translate3d(100%, 0, 0);
}

.turn-on-enter-active, .turn-on-leave-active {
  transition: transform 0.3s ease;
}

.turn-off-leave-to {
  transform: translate3d(100%, 0, 0);
}

.turn-off-enter-active, .turn-off-leave-active {
  transition: transform 0.3s ease;
}

.turn-off-leave-active {
  z-index: 2;
}
</style>

